<template>
	<view :style="'background-color:' + (bgColor)">
		<view class="tools-lay" >
			<view class="sub_group" v-for="(itemGroup,indexGroup) in dataList" :key="indexGroup">
				<image class="tool-img" v-for="(item,index) in itemGroup" :key="item.image" :src="item.image"
					@click="onToolClick(item)"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array
			},

			bgColor: {
				type: String,
				default: '#ff66ff'
			},
		},
		
		methods:{
			onToolClick(e) {
				console.log("onToolClick")
				this.$emit("onToolItemClick" ,e.type )
			}
		}
	}
</script>

<style scoped lang="scss">
	.tools-lay {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.sub_group {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			// background-color: #4CD964;

			.tool-img {
				width: 34upx;
				height: 34upx;
				
			}
			.tool-img:not(:last-child) {
margin-bottom: 13upx;
			}
		}
	}
</style>
